<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  -webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.el-page-header__content {
  font-size: 14px;
}

.el-page-header__title {
  font-size: 14px;
}

.hex-form-inf-content-show {
  font-size: 14px;
  font-weight: 500;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}
</style>
<style scoped>
.edit_dev >>> .el-transfer-panel {
  width: 320px;
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.optPageShow.listPage">
        <div slot="header" class="clearfix">
          <div class="el-page-header__content">互斥池列表</div>
        </div>
        <div>
          <!--工具栏-->
          <div class="head-container">
            <crudOperation :permission="permission"/>
          </div>
          <!--表格渲染-->
          <el-table ref="table" v-if="!this.addDialog" :data="crud.data" style="width: 100%;" v-loading="crud.loading"
                    @select="crud.selectChange" @select-all="crud.selectAllChange"
                    @selection-change="crud.selectionChangeHandler"
                    @filter-change="crud.handleFilterChange"
                    :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }"
                    border
                    stripe
          >
            <el-table-column type="selection"/>
            <el-table-column v-if="columns.visible('groupCode')" prop="groupCode" label="互斥池组编码"/>
            <el-table-column v-if="columns.visible('groupName')" prop="groupName" label="互斥池组名称"/>
            <el-table-column v-if="columns.visible('appCodes')" prop="appCodes" label="应用组集合"/>
            <el-table-column v-if="columns.visible('upTs')" prop="upTs" :show-overflow-tooltip="true" label="修改时间">
              <template slot-scope="scope">
                <div><i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.upTs }}</span></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <div class="data-form" v-if="crud.optPageShow.addPage" style="margin-bottom: 100px;">
        <el-card class="box-card" style="margin-bottom: 10px;">
          <div slot="header" class="clearfix">
            <div class="el-page-header">
              <div class="el-page-header__left" @click="goBack">
                <i class="el-icon-back"></i>
                <div class="el-page-header__title">返回</div>
              </div>
              <div class="el-page-header__content" style="font-size: 14px;">基本信息</div>
            </div>
          </div>
          <div class="dataFrom" v-if="crud.optPageShow.addPage">
            <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="160px">
              <el-row>
                <el-col :span="15">
                  <el-form-item label="互斥组编码" prop="groupCode">
                    <el-input v-model="form.groupCode" :disabled="form.pkId != null"/>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      分组的编号
                    </div>
                    <i
                      class="el-icon-info hex-form-inf-icon"
                      @click="onOperInf($event)"
                      data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="15">
                  <el-form-item label="互斥组名称" prop="groupName">
                    <el-input v-model="form.groupName"/>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      分组的名称
                    </div>
                    <i
                      class="el-icon-info hex-form-inf-icon"
                      @click="onOperInf($event)"
                      data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="15">
                  <el-form-item label="应用组集合" prop="appCodes">
                    <el-select v-model="form.appCodes" filterable multiple clearable placeholder="请选择"
                               style="width: 100%">
                      <el-option v-for="item in appCodeList" :key="item.appCode" :label="item.appCode"
                                 :value="item.appCode"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      应用组的集合
                    </div>
                    <i
                      class="el-icon-info hex-form-inf-icon"
                      @click="onOperInf($event)"
                      data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="15">
                  <el-form-item>
                    <el-button type="primary" :loading="loadStatus" @click="toSubmit">保存</el-button>
                    <el-button @click="goBack">取消</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-card>

        <div style="margin-bottom: 10px">
          <taskList ref="taskList" @initTaskCodeListCallBack="initTaskCodeListCallBack"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CRUD, {crud, form, header, presenter} from '@crud/crud'
import crudOperation from '@crud/extend/mutex/CRUD.operation'
import rule from '@/api/alarm/rules'
import taskList from './taskList'
import mutexPoolGroupApi from '@/api/mutexPool/mutexPoolGroup'

const queryList = [{'cloumValue': 'groupCode', 'cloumName': '组编码'}, {'cloumValue': 'groupName', 'cloumName': '组名称'}]
const defaultCrud = CRUD({
  title: '互斥池配置',
  url: '/api/mutexPoolGroup/selectPages',
  queryList: queryList,
  crudMethod: {...mutexPoolGroupApi}
})
const defaultForm = {pkId: null, groupCode: null, groupName: null, appCodes: [], taskCodes: []}
export default {
  name: 'mutexPool',
  components: {crudOperation, taskList},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    let checkAppGroupData = (rule, value, callback) => {
      var util = {
        isFigure: function (e) {
          return /^[0-9A-Z_|]+$/.test(e);
        }
      }
      if (!util.isFigure(value)) {
        callback(new Error("只能输入大写英文字母、下划线、分隔符或数字！"));
      } else {
        let param = {pkId: this.form.pkId, groupCode: value};
        mutexPoolGroupApi.checkMutexGroupData(param).then(res => {
          if (res){
            callback(new Error("互斥组编码重复"));
          }else {
            callback();
          }
        })
      }
    }
    return {
      loadStatus: false,
      active: 0,
      permission: {
        add: ['mutexPool:add'],
        edit: ['mutexPool:edit'],
        del: ['mutexPool:del'],
      },
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      checkAll: true,
      isIndeterminate: true,
      addDialog: false,
      rules: {
        groupName: [
          {required: true, message: '请输入互斥组名称', trigger: 'blur'},
        ],
        groupCode: [
          {required: true, message: '请输入互斥组编码', trigger: 'blur'},
          {validator: checkAppGroupData, trigger: 'blur'}
        ],
        appCodes: [
          {required: true, message: '请选择应用组集合', trigger: 'change'},
        ]
      },
      show: false,
      validCodeStatus: false,
      validNameStatus: false,
      appCodeList: [],
      taskCodeList: [],
      showType: '',
      updateObject: null
    }
  },
  created() {
    this.crud.optPageShow.listPage = true
    this.crud.optPageShow.addPage = false
  },
  methods: {
    // 删除前
    [CRUD.HOOK.beforeDelete](crud) {
      crud.selections.forEach(item => {
        item.pkId = item.groupCode
      })
    },
    // 新增前
    [CRUD.HOOK.beforeToAdd](crud) {
      this.appCodeList = [];
      this.taskCodeList = [];
      this.initAppList();
    },
    // 编辑前
    [CRUD.HOOK.beforeToEdit](crud) {
      this.initAppList();
      crud.form.appCodes = crud.form.appCodes.split(",");
      this.updateObject = crud.form;
    },
    initTaskCodeListCallBack() {
      if (this.crud.form.pkId != null && this.crud.form.pkId != '') {
        this.$refs['taskList'].initTaskCodeList(this.crud.form.appCodes, this.crud.form.groupCode);
      }
    },
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(value) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    },
    toSubmit() {
      let pkId = this.form.pkId;
      if (pkId != null && pkId != '') {
        this.edit();
      } else {
        this.add();
      }
    },
    initAppList() {
      rule.getappCodeAndName().then(res => {
        if (res) {
          this.appCodeList = res;
        }
      })
    },
    changeStatus(callback) {
      this.isSwitch = callback;
      this.selection = {}
    },
    edit() {
      this.$refs['form'].validate(valid => {
        //
        if (valid) {
          this.loadStatus = true;
          mutexPoolGroupApi.edit(this.form).then(res => {
            this.loadStatus = false;
            this.crud.status.add = CRUD.STATUS.NORMAL;
            this.$notify({title: '成功', message: '修改成功', type: 'success'});
            this.$refs.taskList.initTaskCodeList(this.form.appCodes, this.form.groupCode);
            this.goBack();
          }).catch(res => {
            this.$notify({title: '失败', message: "修改失败", type: 'error'});
          })
        }
      })
    },
    add() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadStatus = true;
          mutexPoolGroupApi.add(this.form).then(res => {
            if (res) {
              this.loadStatus = false;
              this.form.pkId = res.pkId;
              this.crud.status.add = CRUD.STATUS.NORMAL;
              this.$notify({title: '成功', message: '添加成功', type: 'success'});
              //this.init();
              this.$refs.taskList.initTaskCodeList(this.form.appCodes, this.form.groupCode);
              // this.goBack();
            } else {
              this.$notify({title: '添加失败', message: '添加失败', type: 'warning'});
            }
          }).catch(res => {
            this.$notify({title: '添加失败', message: res.msg, type: 'error'});
          })
        }
      })
    },
    goBack() {
      this.crud.optPageShow.listPage = true;
      this.crud.optPageShow.addPage = false;
      this.crud.toQuery();
    },
    /*点击显示提示信息*/
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
  }
}
</script>
